<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title>骨医快线</title>
	<link href="../../css/mui.plus.css" rel="stylesheet" />		
	<link rel="stylesheet" href="../../css/mui.picker.min.css" />
	<style>
		.mui-navigate-right:after {
			content: '\e468';
        	font-size: 30px;
        	color: #30B497;
        	font-weight: bold;
		}
		span:nth-child(2) {
			font-size: 12px;
			color: #666;
		}
		.mui-dtpicker-title {
			height: 0;
		}
		footer {
			position: absolute;
			bottom: 0;
			width: 100%;
			padding: 20px 30%;
		}
		.mui-btn-block {
			padding: 8px 0;
		}
	</style>
</head>
<body>
	<header class="mui-bar mui-bar-nav oe-pri-bar">
	    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	    <h1 class="mui-title">添加量表</h1>
	</header>
	
	<div class="mui-content">
		<ul id="scale" class="mui-table-view">
	        <li class="mui-table-view-cell">
	            <a>
                	<span>加载中...</span>
                	<span></span>
                	<span id="btn-detail" class="mui-pull-right" data-rs="">详情</span>
	            </a>
	        </li>
	        
	    </ul>
	    
	    <script id='tmp-scale' type="text/html">
	    	{{if scale}}
	    		<li class="mui-table-view-cell">
		            <a>
	                	<span>{{scale.rs_name}}</span>
	                	<span>共{{scale.rs_subject_count}}题</span>
	                	<span id="btn-detail" class="mui-pull-right" data-rs="">详情</span>
		            </a>
		        </li>
	    	{{/if}}
	    </script>
	    
	    <div class="oe-divide-block"></div>
	    
	    <ul id="list-node" class="mui-table-view">
            <li id="btn-picker" class="mui-table-view-cell" data-options='{"type":"datetime","customData":{"y":[{"text":"术后第","value":"术后第"}],"m":[{"text":"0","value":"0"},{"text":"1","value":"1"},{"text":"2","value":"2"},{"text":"3","value":"3"},{"text":"4","value":"4"},{"text":"5","value":"5"},{"text":"6","value":"6"},{"text":"7","value":"7"},{"text":"8","value":"8"},{"text":"9","value":"9"},{"text":"10","value":"10"},{"text":"11","value":"11"},{"text":"12","value":"12"},{"text":"13","value":"13"},{"text":"14","value":"14"},{"text":"15","value":"15"},{"text":"16","value":"16"},{"text":"17","value":"17"},{"text":"18","value":"18"},{"text":"19","value":"19"},{"text":"20","value":"20"},{"text":"21","value":"21"},{"text":"22","value":"22"},{"text":"23","value":"23"},{"text":"24","value":"24"}],"d":[{"text":"月","value":"月"}],"h":[{"text":"0","value":"0"},{"text":"1","value":"1"},{"text":"2","value":"2"},{"text":"3","value":"3"}],"i":[{"text":"周","value":"周"}]},"labels":["年", "月", "日", "时段", "分"]}'>
                <a class="mui-navigate-right">
                    <span>添加节点</span>
                    <span>(可多选)</span>
                </a>
            </li>
            <li class="mui-table-view-cell mui-transitioning" data-wek = "4">
				<div class="mui-slider-right mui-disabled">
					<a class="mui-btn mui-btn-red" style="transform: translate(0px, 0px);">删除</a>
				</div>
				<div class="mui-slider-handle" style="transform: translate(0px, 0px);">
					第1月
				</div>
			</li>
			<li class="mui-table-view-cell mui-transitioning" data-wek = "12">
				<div class="mui-slider-right mui-disabled">
					<a class="mui-btn mui-btn-red" style="transform: translate(0px, 0px);">删除</a>
				</div>
				<div class="mui-slider-handle" style="transform: translate(0px, 0px);">
					第3月
				</div>
			</li>
			<li class="mui-table-view-cell mui-transitioning" data-wek = "24">
				<div class="mui-slider-right mui-disabled">
					<a class="mui-btn mui-btn-red" style="transform: translate(0px, 0px);">删除</a>
				</div>
				<div class="mui-slider-handle" style="transform: translate(0px, 0px);">
					第6月
				</div>
			</li>
			<li class="mui-table-view-cell mui-transitioning" data-wek = "48">
				<div class="mui-slider-right mui-disabled">
					<a class="mui-btn mui-btn-red" style="transform: translate(0px, 0px);">删除</a>
				</div>
				<div class="mui-slider-handle" style="transform: translate(0px, 0px);">
					第12月
				</div>
			</li>
        </ul>
	</div>
	
	<footer>
		<button id="btn-submit" type="button" class="mui-btn mui-btn-primary mui-btn-block">确认添加</button>
	</footer>
	
	<script id="tmp-node" type="text/html">
		{{if node}}
			<li class="mui-table-view-cell mui-transitioning" data-wek = "{{node.wekTotal}}">
				<div class="mui-slider-right mui-disabled">
					<a class="mui-btn mui-btn-red" style="transform: translate(0px, 0px);">删除</a>
				</div>
				<div class="mui-slider-handle" style="transform: translate(0px, 0px);">
					{{if node.wek !== '0'}}
						第{{node.mon}}月第{{node.wek}}周
					{{else}}
						第{{node.mon}}月
					{{/if}}
				</div>
			</li>
		{{/if}}
	</script>
	
	<script src="../../js/mui.min.js"></script>
	<script src="../../js/app.js"></script>
	<script src="../../js/lib/template.js"></script>
	<script src="../../js/mui.picker.min.js"></script>
	<script type="text/javascript">
		(function($, a){
			var tmpData = {}, // 模板数据对象
				html, //用于存储html的临时变量
				wv,
				rsId, // 量表id
				nodeFo = {}, // 随访节点
				dataToFoAdd = {}, // 传往添加随访页面的数据
				dataFromOpener = {}; // 从父页面传递来的数据
				
				
			// 选择时间节点按钮
			$('.mui-content').on('tap', '#btn-picker', function(){
				// 初始化DtPicker组件
				var optionsJson = this.getAttribute('data-options') || '{}';
				var options = JSON.parse(optionsJson);
				var id = this.getAttribute('id');
				var picker = new $.DtPicker(options);
				
				picker.show(function(rs){
					if(rs.m.text === '0' && rs.h.text === '0') return $.toast('当前节点不可选');
					
					nodeFo.mon = rs.m.text;
					nodeFo.wek = rs.h.text;
					nodeFo.wekTotal = getWekByNodeFo(nodeFo);
					
					tmpData.node = nodeFo;
					html = template('tmp-node', tmpData);
					document.getElementById("list-node").innerHTML += html;
				});
			});
			
			// 量表详情
			$('.mui-content').on('tap', '#btn-detail', function(){
				$.openWindow({
					url: 'detail.html',
					waiting: {
						autoShow: false
					},
					extras: {
						rs_id: rsId
					}
				});
			})
			
			// 左滑删除按钮
			$('#list-node').on('tap', '.mui-btn', function(){
				var elem = this;
				var li = elem.parentNode.parentNode;
				$.confirm('确认删除该条记录？', '骨医快线', ['确认', '取消'], function(e) {
					if (e.index === 0) {
						li.parentNode.removeChild(li);
					} else {
						setTimeout(function() {
							$.swipeoutClose(li);
						}, 0);
					}
				});
			});
			
			window.addEventListener('updateScaleInfo',function(e){
				getScaleById(e.detail.rs_id);
				rsId = e.detail.rs_id;
			})
			
			$.plusReady(function(){
				wv = plus.webview.currentWebview();
				dataFromOpener = wv.dataFromOpener;
				rsId = wv.rs_id;
				getScaleById(rsId);
				
				// 提交按钮
				$('footer').on('tap', '#btn-submit', function(){
					dataToFoAdd.fr_point = getNodeFromList('list-node');
					
					if(dataToFoAdd.fr_point === ''){
						return $.toast('请添加至少一个时间节点');
					}
					if(/add/.test(dataFromOpener.startPageId)){
						// 添加随访的分支
						var nextPage = plus.webview.getWebviewById(dataFromOpener.startPageId)
						
						$.fire(nextPage, 'updateScaleList', dataToFoAdd);
						
						$.openWindow({
							id: dataFromOpener.startPageId
						});
						
						wv.close('slide-out-left');
					}else {
						// 随访详情的分支
						dataToFoAdd.fr_fo_id = dataFromOpener.foId;
						
						app.net.post('c_followup_rs/create', dataToFoAdd, function(data){
							$.alert('添加成功', '骨医快线', function(){
								$.back();
							});	
						});
					}
				});
			})
			
			// 从字符串中提取数字
			var getNumFromString = function(str){
				if(typeof str !== 'string')return console.error('Type Error');
				return str.replace(/[^0-9]+/g, '')
			}
			
			// 从时间节点中
			var getWekByNodeFo = function(nodeFo){
				return ~~nodeFo.mon*4+~~nodeFo.wek;
			}
			
			var getScaleById = function(rsId){
				app.net.get('c_rating_scale/show_detail', {rs_id: rsId} , function(data){
					if(data && data.code === '100'){
						dataToFoAdd.fr_rs_id = data.data.rs_id,
						dataToFoAdd.fr_name = data.data.rs_name;
						
						tmpData.scale = data.data;
						html = template('tmp-scale', tmpData);
						document.getElementById("scale").innerHTML = html;
					}
				});
			}
			
			// 从节点列表中获取节点信息
			var getNodeFromList = function(listId){
				var elements = document.getElementById(listId).getElementsByTagName('li');
				var nodeList = [];
				
				for(var i in elements){
					if(/^[0-9]*$/.test(i) && i !== '0') nodeList.push(elements[i].dataset.wek);
				}
				
				return nodeList.toString();
			}
		}(mui, app));
	</script>
</body>
</html>